<template>
	<view style="padding-bottom: 100rpx;">
		<view class="moment-wrap">
			<view class="moment">
				<view class="avatar-nick-level-time-follow" @click="toProfileHome">
					<view class="avatar">
						<image src="https://www.auok.ltd/background.jpg" mode="aspectFill"></image>
					</view>
					<view class="nick-level-time-follow">
						<view class="nick-level-follow">
							<view class="nick-level">
								<view class="nick">阿萨的开发商的开发上</view>
								<view class="level">LV.13</view>
							</view>
							<view class="follow" @click.stop="follow">关注</view>
						</view>
						<view class="time">刚刚</view>
					</view>
				</view>
				<view class="content">
					君不见黄河之水天上来，奔流到海不复回。
					君不见高堂明镜悲白发，朝如青丝暮成雪。
					人生得意须尽欢，莫使金樽空对月。
					天生我材必有用，千金散尽还复来。
					烹羊宰牛且为乐，会须一饮三百杯。
					岑夫子，丹丘生，将进酒，杯莫停。
					与君歌一曲，请君为我倾耳听。
					钟鼓馔玉不足贵，但愿长醉不复醒。
					古来圣贤皆寂寞，惟有饮者留其名。
					陈王昔时宴平乐，斗酒十千恣欢谑。
					主人何为言少钱，径须沽取对君酌。
					五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
				</view>
				<view class="media" v-if="true">
					<!-- 有视频没图片、有图片没视频 -->
					<view class="show-video" v-if="false">
						<video src="https://www.auok.ltd/999.mp4"></video>
					</view>
					<block v-else>
						<!-- 图片一张  -->
						<view class="show-img1" v-if="info.imgList.length === 1">
							<image :src="info.imgList[0].url" mode="aspectFill" @click="preview(0)"></image>
						</view>
						<!-- 图片两张 -->
						<view class="show-img2" v-if="info.imgList.length === 2">
							<image v-for="(item,index) in info.imgList" :src="item.url" mode="aspectFill"
								@click="preview(index)"></image>
						</view>
						<!-- 图片大于三张 -->
						<view class="show-img3" v-if="info.imgList.length >= 3">
							<image v-for="(item,index) in info.imgList" :src="item.url" mode="aspectFill"
								@click="preview(index)">
							</image>
						</view>
					</block>

				</view>
				<view class="times">3579阅读</view>
				<view class="like-list">
					<u-icon name='thumb-up-fill' color='#999' size='34'></u-icon> <text v-for="item in 20"
						@click="toProfileHome">你好</text>
				</view>
			</view>
		</view>
		<commentList></commentList>
		<comment ref='comment'></comment>
	</view>
</template>

<script>
	import comment from '@/components/comment.vue'
	import commentList from '@/components/commentList.vue'
	export default {
		name: "showMoment",
		components: {
			comment,
			commentList
		},
		mounted() {
			uni.$on('reply', data => {
				this.$refs.comment.show = true
			})
		},
		data() {
			return {
				info: {
					content: '',
					imgList: [{
						url: 'https://www.auok.ltd/background.jpg'
					}, {
						url: 'https://www.auok.ltd/background.jpg'
					}, {
						url: 'https://www.auok.ltd/background.jpg'
					}]
				}
			};
		},
		methods: {
			preview(index) {
				console.log(this.info.imgList)
				uni.previewImage({
					urls: this.info.imgList.map(e => e.url),
					current: index
				})
			},
			toProfileHome() {
				uni.navigateTo({
					url: '../profileHome/profileHome'
				})
			},
			//点关注
			follow() {

			},

		}
	}
</script>

<style lang="less" scoped>
	.like-list {
		font-size: 24rpx;
		color: #004a94;

		text {
			&:not(:last-child) {
				&::after {
					content: '，';
				}
			}
		}
	}

	.times {
		color: #999;
		font-size: 24rpx;
		margin: 20rpx 0;
	}

	.media {
		.show-video {

			// border: 1px solid;
			video {
				width: 100%;
				border-radius: 20rpx;
			}
		}

		.show-img1 {
			image {
				width: 100%;
				border-radius: 20rpx;
			}
		}

		.show-img2 {
			image {
				width: 48%;
				margin: 1%;
				max-height: 320rpx;
				border-radius: 20rpx;
			}
		}

		.show-img3 {
			image {
				width: 31%;
				margin: 1%;
				max-height: 210rpx;
				border-radius: 20rpx;
			}
		}
	}

	.moment-wrap {
		// padding: 30rpx;
	}

	.moment {
		background: #FFFFFF;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.tool {
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #999;
		padding-top: 20rpx;

		.u-icon {
			margin-right: 10rpx;
			color: #333;
		}
	}

	.content {
		font-size: 32rpx;
		margin: 25rpx 0;
		color: #333;
		line-height: 1.4;
	}

	.avatar-nick-level-time-follow {
		display: flex;
		align-items: center;

		.nick-level-time-follow {
			width: 100%;

			.nick-level-follow {
				display: flex;
				align-items: center;
				// border: 1px solid;
				justify-content: space-between;

				.nick-level {
					display: flex;
					align-items: center;

					.nick {
						// margin-right: 15rpx;
						// color: #333;
						font-size: 32rpx;
					}

					.level {
						font-size: 26rpx;
						color: #FFFFFF;
						background-color: #ff4273;
						padding: 4rpx 8rpx;
						border-radius: 8rpx;
						transform: scale(.8);
					}
				}





				.follow {
					background-color: #ff4273;
					color: #FFFFFF;
					padding: 6rpx 20rpx;
					border-radius: 10rpx;
					font-size: 26rpx;
					transform: scale(.8);
				}
			}

			.time {
				color: rgba(127, 127, 127.3);
				margin-top: 15rpx;
				font-size: 26rpx;

			}
		}

		.avatar {
			margin-right: 20rpx;

			image {
				height: 80rpx;
				width: 80rpx;
				border-radius: 50%;
			}

		}
	}
</style>
